<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>异步加载地图</title>
<style type="text/css">
body, html, #map-canvas {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}
</style>
</head>

<body>
	<div id="map-canvas"></div>
</body>
<script type="text/javascript">
//<![CDATA[
    var search = window.location.search;
    var params = { zoom: 15, marker: 1, content: '' };
    for (var i in search.slice(1).split("&")) {
      var item = search.slice(1).split("&")[i]
      var param = item.split("=")
      switch (param[0]) {
        case "ak":
          params.ak = param[1];
          break;
        case "address":
          params.address = decodeURI(param[1]);
          break;
        case "zoom":
          params.zoom = parseInt(param[1]);
          break;
        case "marker":
          params.marker = parseInt(param[1]);
          break;
        case "long":
          params.long = param[1];
          break;
        case "lat":
          params.lat = param[1];
          break;
        case "content":
          params.content = decodeURI(param[1]);
          break;
        case "posType":
          params.posType = parseInt(param[1]);
          break;
        case "width":
          params.width = decodeURI(param[1]);
          break;
        case "height":
          params.height = decodeURI(param[1]);
          break;
        default:
          break;
      }
    }
    function loadScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?key=' + params.ak + '&sensor=false&callback=initialize';
      document.body.appendChild(script);
    }

    function initialize() {
      document.getElementById('map-canvas').style.width = "100%";
      document.getElementById('map-canvas').style.height = params.height;
      if (params.posType === 1) {
        var geocoder = new google.maps.Geocoder();
        address = decodeURI(params.address);
        geocoder.geocode({ address: address }, function geoResults(results, status) {
          //这里是回掉函数(即结果处理函数)
          //状态为Ok说明有结果
          if (status == google.maps.GeocoderStatus.OK) {
            //一般情况下会有多个结果
            params.lat = results[0].geometry.location.lat();
            params.long = results[0].geometry.location.lng();
          } else {
            params.lat = 37.775;
            params.long = -122.418333;
          }
          initMap()
        });
      } else {
        initMap()
      }
    }
    var overviewmap = 0
    var scale = 0
    var map;
    function initMap() {
      var touchSupported = (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch), forceTouch = false;
      var isPanControl = false;
      var isZoomControl = true;
      var zoomStyle = google.maps.ZoomControlStyle.SMALL;

      var myLatLng = new google.maps.LatLng(params.lat, params.long);
      var mapOptions = {
        scrollwheel: false,
        center: myLatLng,
        zoom: params.zoom,
        panControl: isPanControl,
        zoomControl: isZoomControl,
        zoomControlOptions: { style: zoomStyle },
        overviewMapControl: (overviewmap == 1 ? true : false),
        overviewMapControlOptions: { opened: (overviewmap == 1 ? true : false) },
        scaleControl: (scale == 1 ? true : false),
        mapTypeControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      if (params.marker == 1) {
        var point = new google.maps.Marker({ position: myLatLng, map: map });
      }
      if (params.content && params.content !== '') {
        var infowindow = new google.maps.InfoWindow();//创建一个提示框，变量必须全局变量，否则函数无法使用
        infowindow.setContent(params.content);//设置提示框内容
        infowindow.setPosition(myLatLng);//定位
        infowindow.open(map);
      }
    }
    window.onload = loadScript;
//]]>
</script>
</html>